<template>
  <div class="content">
    <el-card>
      <comment v-loading="loading" :comments="comments" :is-reply="false" :is-delete="true" @delete="handleDelete" />
      <div v-if="isLoading" v-loading="true" class="loading" />
    </el-card>
  </div>
</template>

<script>
import comment from '@/components/Comment/index'
import { getCommentList, deleteComment } from '@/api/comment'

export default {
  components: {
    comment
  },
  data() {
    return {
      loading: false,
      isLoading: false,
      myText: '',
      comments: [],
      params: {
        current: 1,
        size: 10,
        type: 0
      },
      page: {
        current: 1,
        size: 10,
        total: 0,
        pages: 0
      }
    }
  },
  created() {
    this.fetchData()
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed() {
    //  离开页面清除（移除）滚轮滚动事件
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    // 获取标签列表
    fetchData() {
      this.loading = !this.isLoading
      getCommentList(this.params).then(response => {
        if (response.code === 200) {
          if (this.comments.length === 0) {
            this.comments = response.data.records
          } else {
            response.data.records.forEach(item => {
              this.comments.push(item)
            })
          }
          this.page.current = response.data.current
          this.page.size = response.data.current
          this.page.total = response.data.total
          this.page.pages = response.data.pages
        } else {
          this.$message({
            type: 'error',
            message: response.message
          })
        }
        this.loading = false
        this.isLoading = false
      })
    },
    handleScroll() {
      // 距离顶部的距离
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight
      // 滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
      // 滚动条到底部的条件
      if (scrollTop + windowHeight === scrollHeight) {
        if (this.params.current < this.page.pages) {
          this.isLoading = true
          this.params.current += 1
          this.fetchData()
        }
      }
    },
    // 删除评论
    handleDelete(row) {
      this.$confirm('是否永久删除该留言?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        deleteComment(row.id).then(response => {
          if (response.code === 200) {
            // 删除数组里面的对象，无需再请求
            this.comments.forEach(item => {
              if (item.id === row.id) {
                this.comments.splice(this.comments.indexOf(item), 1)
                return
              }
            })
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message({
              type: 'error',
              message: response.message
            })
          }
          this.loading = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style lang="scss">
  .content {
    .loading {
      .el-loading-spinner .circular {
        height: 30px;
        width: 30px;
      }
    }
  }
</style>

<style lang="scss" scoped>
  .content {
    padding: 20px;
    .loading {
      display: flex;
      justify-content: center;
      margin-top: 35px;
    }
  }
</style>
